<!DOCTYPE HTML>
<script src="../../../../resources/js-test.js"></script>
<style>
#target {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid blue;
}
</style>
<div id=target>
  Tap me
</div>
<script>
function eventLogger(e) {
    debug("Received " + e.type + " on " + (e.currentTarget.id || e.currentTarget.nodeName));
}

function logAndRemove(e) {
    eventLogger(e);
    e.currentTarget.parentNode.removeChild(e.currentTarget);
    debug("Removed element");
    e = null;
    gc();
}

function logAndFail(e) {
    eventLogger(e);
    testFailed("Received unexpected event.");
}

function getTargetPoint() {
    // Note that we don't want any reference to the node to escape this function
    // so that it's elligble for garbage collection.
    var target = document.getElementById('target');
    target.addEventListener('mousemove', logAndRemove);
    target.addEventListener('mousedown', logAndFail);
    target.addEventListener('mouseup', logAndFail);
    target.addEventListener('click', logAndFail);
    document.addEventListener('mousemove', eventLogger);
    document.addEventListener('mousedown', eventLogger);
    document.addEventListener('mouseup', eventLogger);
    document.addEventListener('click', eventLogger);

    var rect = target.getBoundingClientRect();
    return {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
    };
}

onload = function() {
    description("Verifies that deleting the element being tapped during the event sequence doesn't cause any problems.  Succeeds if the expected events are delivered, events after removal go to the new node at the point of tap, and we don't crash.");

    var point = getTargetPoint();

    if (!window.eventSender) {
        debug("This test requires eventSender");
        return;
    }

    debug("Sending GestureTapDown");
    eventSender.gestureTapDown(point.x, point.y);

    debug("Sending GestureShowPress");
    eventSender.gestureShowPress(point.x, point.y);

    debug("Sending GestureTap");
    eventSender.gestureTap(point.x, point.y);
}

</script>
